<template>
	<base-popup-small titleT="realname.title">
		<div class="py-5">
			<base-tip textT="realname.tip"></base-tip>
			<base-input
				class="mt-7"
				:label="$t('realname.PH')"
				v-model="realname"
				:error="realnameError" />
			<base-text class="text-sm text-t-4" textT="profile.cannotChange" />
			<base-button
				class="mt-5"
				type="primary"
				:disabled="submitDisabled"
				:loading="loading"
				@click="onSubmit">
				{{ $t('action.confirm') }}
			</base-button>
		</div>
	</base-popup-small>
</template>

<script lang="ts" setup>
import { BasePopupSmall, BaseTip, BaseText, BaseInput, BaseButton } from '@/components/base'
import { ref, computed } from 'vue'
import { useProfileStore } from '@/store'
import { setRealname } from '@/api/profile'
import { useRequest } from '@/hooks'
import { t } from '@/utils'

const emits = defineEmits(['success'])

const profileStore = useProfileStore()

const realname = ref('')

const realnameError = computed(() =>
	realname.value && realname.value.length < 1 ? t('realname.nameError') : ''
)

const submitDisabled = computed(() => !realname.value || !!realnameError.value)

const { run, loading } = useRequest(setRealname, {
	showSuccess: true,
	showError: true,
	onSuccess: () => {
		profileStore.getUserInfo()
		emits('success')
	}
})

const onSubmit = () => {
	run({
		realname: realname.value
	})
}
</script>
